<template>
	<div>
	  <el-dialog :title="$t('menu.Minus')" width="80%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" :append-to-body="true">
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;"> 
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">		   
						    <el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type='' v-if="fieldList[0].checked" property="id" label="ID" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="uid" :label="$t('field.Minus_uid')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="user_real_name" :label="$t('field.Minus_user_real_name')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="number" :label="$t('field.Minus_number')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="remark" :label="$t('field.Minus_remark')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="status" :label="$t('field.Minus_status')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="info" v-if="scope.row.status == '0'" size="mini" effect="dark">申请</el-tag>
							          <el-tag type="success" v-if="scope.row.status == '1'" size="mini" effect="dark">批准</el-tag>
							          <el-tag type="warning" v-if="scope.row.status == '2'" size="mini" effect="dark">驳回</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[6].checked" property="type" :label="$t('field.Minus_type')" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getTypeValue(scope.row.type)}}
      							   </template>
							 </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[7].checked" property="create_time" :label="$t('field.Minus_create_time')" show-overflow-tooltip width="" >
								<template slot-scope="scope">
									{{parseTime(scope.row.create_time)}}
								</template>
							 </el-table-column>										
							<el-table-column align="center"  v-if="fieldList[8].checked" property="approved_by" :label="$t('field.Minus_approved_by')" show-overflow-tooltip width="" >
							</el-table-column>
							 <el-table-column align="center"  v-if="fieldList[9].checked" property="approve_time" :label="$t('field.Minus_approve_time')" show-overflow-tooltip width="" >
								<template slot-scope="scope">
									{{parseTime(scope.row.approve_time)}}
								</template>
							 </el-table-column>
							<el-table-column align="center>"  v-if="fieldList[10].checked" property="caller" :label="$t('field.Minus_caller')" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getCallerValue(scope.row.caller)}}
      							   </template>
							 </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span>{{$t('system.confirm')}}</span>
				</el-button>
				<el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
		</div>
	</el-dialog>  		
	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	    getUpdateInfo,
	    approve,       
	} from '@/api/app/minus'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	  
	export default {
		name:'minusSelect',
		props: {
            show: {
                type: Boolean,
                default: false
            },
            size: {
                type: String,
                default: 'small'
            },
            querys:{
                type:Object,
           
            }
	     },
		components: {
			Search,
			Page,
			TableTool,
		},
		data(){
			return {
				dialog: {
	  			
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:this.$t('field.Minus_uid'),checked:true},
				    {lable:this.$t('field.Minus_user_real_name'),checked:true},
				    {lable:this.$t('field.Minus_number'),checked:true},
				    {lable:this.$t('field.Minus_remark'),checked:true},
				    {lable:this.$t('field.Minus_status'),checked:true},
				    {lable:this.$t('field.Minus_type'),checked:true},
				    {lable:this.$t('field.Minus_create_time'),checked:true},
				    {lable:this.$t('field.Minus_approved_by'),checked:true},
				    {lable:this.$t('field.Minus_approve_time'),checked:true},
				    {lable:this.$t('field.Minus_caller'),checked:false},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},			
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
				uid:this.$route.query.uid,
			}
		},
		methods: {
			open(){
			     //Here can add some logics for open
                 this.index()
		     },
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
			    if(this.querys){
			    Object.assign(param, this.searchData,this.querys)
			    }else{
				Object.assign(param, this.searchData)
				}
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						        {type:'Input',label:this.$t('field.Minus_uid'),prop:'uid',width:'150px'},   
						        {type:'Input',label:this.$t('field.Minus_user_real_name'),prop:'user_real_name',width:'150px'},   
						       {type:'Select',label:this.$t('field.Minus_status'),prop:'status',data:[{"val":"0","label_color":"info","key":"申请"},{"val":"1","label_color":"success","key":"批准"},{"val":"2","label_color":"warning","key":"驳回"}],width:'150px'},
						       {type:'Select',label:this.$t('field.Minus_type'),prop:'type',data:res.sql_field_data.types,width:'150px'},
						        {type:'datetime',label:this.$t('field.Minus_create_time'),prop:'create_time',width:'150px'},
						        {type:'datetime',label:this.$t('field.Minus_approve_time'),prop:'approve_time',width:'150px'},
						        {type:'Input',label:this.$t('field.Minus_user_name'),prop:'user_name',width:'150px'},   
						        {type:'Input',label:this.$t('field.Minus_user_phone'),prop:'user_phone',width:'150px'},   
						       {type:'Select',label:this.$t('field.Minus_caller'),prop:'caller',data:res.sql_field_data.callers,width:'150px'},
						]
					}
				})
			},
			getTypeValue(e) {
               for (var i = 0; i < this.small_tables.types.length; i++) {
                 if (this.small_tables.types[i].val == e) {
                    return this.small_tables.types[i].key;
                 }
               }
             },
			getCallerValue(e) {
               for (var i = 0; i < this.small_tables.callers.length; i++) {
                 if (this.small_tables.callers[i].val == e) {
                    return this.small_tables.callers[i].key;
                 }
               }
             },
	
	
	
	
	
	
	
	
			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
	     submit(){
			this.$emit('closeSelect', this.selectRows)
			this.$emit('update:show', false)
			this.loading=false
		 },	
		 closeForm(){
		    	this.$emit('update:show', false)
                this.loading=false
		  },			
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>